<template>
	<view>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" style="height: 210px;">
			<swiper-item>
				<image src='../../static/image/one.png' style="width: 100%;height: 210px;"></image>
			</swiper-item>
			<swiper-item>
				<image src='../../static/image/two.png' style="width: 100%;height: 210px;"></image>
			</swiper-item>
			<swiper-item>
				<image src='../../static/image/three.png' style="width: 100%;height: 210px;"></image>
			</swiper-item>
		</swiper>
		<!-- 留言 -->
		<view class="view-container" style="text-align: center;">
		
			<view class="postList" v-for="(item, index) in postList" :key="item.id" style="margin-bottom: 30px;"
				@click="comment(item.id)">
				<text style="font-size: 16px;">{{item.title}}</text><br>
				<text style="font-size: 14px;">{{item.content}}</text>
				<view class="user-info" @click.stop="showChatOptions(item.id)">
					<image src='../../static/image/photo.png' class="avatar"></image>
					<!-- <text class="nickname">{{ getNickname(item.userId) }} </text> -->
					<text class="nickname">嘻嘻</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				postList: [],
				content: '', // 用于存储评论内容
				users: {} // 用于存储用户信息
			};
		},
		onLoad(options) {
			this.getList();
		},
		methods: {
			getList() {
				this.$request({
					url: '/posts',
					method: 'GET',
				}).then(res => {
					console.log(res);
					this.postList = res.data;

					// // 初始化 users 对象
					// this.users = {};

					// // 遍历 postList 获取用户 ID 并请求用户详情
					// const userIds = [...new Set(this.postList.map(item => item.userId))];
					// userIds.forEach(userId => {
					// 	this.fetchUserProfile(userId);
					// });
				}).catch(err => {
					console.error('获取帖子列表失败', err);
				});
			},
			// fetchUserProfile(userId) {
			// 	this.$request({
			// 		url: '/users/profile',
			// 		method: 'GET',
			// 		header: {
			// 			Authorization: uni.getStorageSync('token')
			// 		}
			// 	}).then(res => {
			// 		if (res.code === 200) {
			// 			this.users[userId] = res.data.username;
			// 		} else {
			// 			console.error(`获取用户 ID 为 ${userId} 的信息失败`);
			// 		}
			// 	}).catch(err => {
			// 		console.error(`获取用户 ID 为 ${userId} 的信息失败`, err);
			// 	});
			// },
			// getNickname(userId) {
			//     console.log('Fetching nickname for userId:', userId); // 调试信息
			//     return this.users[userId] || '未知用户';
			// },
		// 	comment(postId) {
		// 		// 在这里实现评论逻辑，例如弹出输入框让用户输入评论内容，并将其发送到后端
		// 		uni.showModal({
		// 			title: '私信',
		// 			editable: true,
		// 			confirmText: '提交', // 设置确认按钮的文本
		// 			cancelText: '取消', // 设置取消按钮的文本
		// 			success: (res) => {
		// 				console.log('Modal result:', res); // 添加日志输出
		// 				if (res.confirm && res.content) {
		// 					this.sendComment(postId, res.content);
		// 				}
		// 			}
		// 		})
		// 	},
		// 	sendComment(postId, content) {
		// 		this.$request({
		// 			url: '/comments?postId=' + postId + '&content=' + content, // 后端接收评论的接口地址
		// 			method: 'POST',
		// 		}).then(res => {
		// 			// console.log('Comment response:', res);
		// 			if (res.code == 200) {
		// 				uni.showToast({
		// 					title: '私信成功',
		// 					icon: 'none'
		// 				});
		// 			} else {
		// 				uni.showToast({
		// 					title: '私信失败，请重试',
		// 					icon: 'none'
		// 				});
		// 			}
		// 		}).catch(err => {
		// 			// 处理请求错误
		// 			console.error('Error sending comment:', err);
		// 			uni.showToast({
		// 				title: '私信失败，请重试',
		// 				icon: 'none'
		// 			});
		// 		});
		// 	},
		// 	showChatOptions(userId) {
		// 		uni.showActionSheet({
		// 			itemList: ['开始聊天', '取消'],
		// 			success: (res) => {
		// 				if (res.tapIndex === 0) {
		// 					this.startChat(userId);
		// 				}
		// 			}
		// 		});
		// 	},
		// 	startChat(userId) {
		// 		console.log('开始与用户', userId, '聊天');
		// 		// 在这里实现聊天逻辑，例如跳转到聊天页面
		// 		uni.navigateTo({
		// 			url: '/pages/chat/chatting',
		// 		});
		// 	}
		}
	};
</script>

<style>
	* {
		margin: 3px;
	}

	.inspirational-quote {
		margin-top: 20px;
		background-color: #f5f5f5;
		padding: 20px;
	}

	text {
		font-size: 26px;
		font-weight: bold;
	}

	.postList {
		color: #333;
		line-height: 1.5;
		padding: 10px;
		background-color: #FFFFF0;
		border: 1px solid #ddd;
		border-radius: 5px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		position: relative;
		/* 添加相对定位 */
	}

	.user-info {
		position: absolute;
		/* 添加绝对定位 */
		bottom: 10px;
		/* 距离底部10px */
		right: 10px;
		/* 距离右边10px */
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-right: 5px;
	}

	.nickname {
		font-size: 12px;
		color: #666;
	}
</style>